import { ClusterOutlined, ContactsOutlined, HomeOutlined } from '@ant-design/icons';
import { GridContent } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Col, Row } from 'antd';
import React, { useState, useEffect } from 'react';
import useStyles from './Center.style';
import Applications from './components/Applications';
import Articles from './components/Articles';
import Projects from './components/Projects';
import type {  tabKeyType } from './data.d';
import { fetchUserOrganizaiton } from '../../../utility/fetchorganizationforselect';
const operationTabList = [
  {
    key: 'systeminfo',
    tab: (
      <span>
        系统消息{' '}
        <span
          style={{
            fontSize: 14,
          }}
        >
          (8)
        </span>
      </span>
    ),
  },
  {
    key: 'todotask',
    tab: (
      <span>
        待办任务{' '}
        <span
          style={{
            fontSize: 14,
          }}
        >
          (8)
        </span>
      </span>
    ),
  }
];
//这里就是一个小组件，专用于左侧标签的填入，可以删除
// const TagList: React.FC<{
//   tags: CurrentUser['tags'];
// }> = ({ tags }) => {
//   const { styles } = useStyles();
//   const ref = useRef<InputRef | null>(null);
//   const [newTags, setNewTags] = useState<TagType[]>([]);
//   const [inputVisible, setInputVisible] = useState<boolean>(false);
//   const [inputValue, setInputValue] = useState<string>('');
//   const showInput = () => {
//     setInputVisible(true);
//     if (ref.current) {
//       // eslint-disable-next-line no-unused-expressions
//       ref.current?.focus();
//     }
//   };
//   //
//   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//     setInputValue(e.target.value);
//   };
//   const handleInputConfirm = () => {
//     let tempsTags = [...newTags];
//     if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
//       tempsTags = [
//         ...tempsTags,
//         {
//           key: `new-${tempsTags.length}`,
//           label: inputValue,
//         },
//       ];
//     }
//     setNewTags(tempsTags);
//     setInputVisible(false);
//     setInputValue('');
//   };
//   return (
//     <div className={styles.tags}>
//       <div className={styles.tagsTitle}>标签</div>
//       {(tags || []).concat(newTags).map((item) => (
//         <Tag key={item.key}>{item.label}</Tag>
//       ))}
//       {inputVisible && (
//         <Input
//           ref={ref}
//           type="text"
//           size="small"
//           style={{
//             width: 78,
//           }}
//           value={inputValue}
//           onChange={handleInputChange}
//           onBlur={handleInputConfirm}
//           onPressEnter={handleInputConfirm}
//         />
//       )}
//       {!inputVisible && (
//         <Tag
//           onClick={showInput}
//           style={{
//             borderStyle: 'dashed',
//           }}
//         >
//           <PlusOutlined />
//         </Tag>
//       )}
//     </div>
//   );
// };


const Center: React.FC = () => {

  const { initialState } = useModel('@@initialState');
  const { currentUserInfo } = initialState || {};
  const { styles } = useStyles();
  const [tabKey, setTabKey] = useState<tabKeyType>('systeminfo');
  const [userorganization, setUserorganization] = useState<API.OrganizationListItem>({});
  //  获取用户信息

  useEffect(() => {
    const loadData = async () => {
      // 获取两个类别的数据  
      const user = await fetchUserOrganizaiton(  
        currentUserInfo?.dept || 0,  
        currentUserInfo?.section || 0,  
        currentUserInfo?.group || 0  
      );  
      // 更新状态  
      setUserorganization(user);
    };
    loadData();
  }, [currentUserInfo]);

  //  渲染左侧的用户信息
  const renderUserInfo = ({ realname,  email }: Partial<API.LoginWebAPIResult>) => {
    return (
      <div className={styles.detail}>
        <p>
          <ContactsOutlined
            style={{
              marginRight: 8,
            }}
          />
          {realname}
        </p>
        <p>
          <ClusterOutlined
            style={{
              marginRight: 8,
            }}
          />
          {userorganization.deptdesc}-{userorganization.secdesc}-{userorganization.groupdesc}
        </p>
        <p>
          <HomeOutlined
            style={{
              marginRight: 8,
            }}
          />
          {email}
        </p>
      </div>
    );
  };

  // 渲染tab切换
  const renderChildrenByTabKey = (tabValue: tabKeyType) => {
    if (tabValue === 'projects') {
      return <Projects />;
    }
    if (tabValue === 'todotask') {
      return <Applications />;
    }
    if (tabValue === 'systeminfo') {
      return <Articles />;
    }
    return null;
  };
  return (
    <GridContent>
      <Row gutter={24}>
        <Col lg={7} md={24}>
          <Card
            bordered={false}
            style={{
              marginBottom: 24,
            }}
            // loading={loading}
          >
            { currentUserInfo && (
              <div>
                <div className={styles.avatarHolder}>
                  <img alt="" src={window.avatarpath + currentUserInfo?.avatar} />
                  <div className={styles.name}>{currentUserInfo?.access}</div>
                  <div className={styles.name}>{currentUserInfo?.loginname}</div>
                  {/* <div>{currentUser?.signature}</div> */}
                </div>
                {renderUserInfo(currentUserInfo || {})}
                {/* <Divider dashed /> */}
                {/* <TagList tags={currentUser.tags || []} /> */}
                {/* <Divider
                  style={{
                    marginTop: 16,
                  }}
                  dashed
                /> */}
                {/* <div className={styles.team}>
                  <div className={styles.teamTitle}>团队</div>
                  <Row gutter={36}>
                    {currentUser.notice &&
                      currentUser.notice.map((item) => (
                        <Col key={item.id} lg={24} xl={12}>
                          <a href={item.href}>
                            <Avatar size="small" src={item.logo} />
                            {item.member}
                          </a>
                        </Col>
                      ))}
                  </Row>
                </div> */}
              </div>
            )}
          </Card>
        </Col>
        <Col lg={17} md={24}>
          <Card
            className={styles.tabsCard}
            bordered={false}
            tabList={operationTabList}
            activeTabKey={tabKey}
            onTabChange={(_tabKey: string) => {
              setTabKey(_tabKey as tabKeyType);
            }}
          >
            {renderChildrenByTabKey(tabKey)}
          </Card>
        </Col>
      </Row>
    </GridContent>
  );
};
export default Center;
